<template>
	<view class="content">
		<view class="wid100 " style="height: 416rpx;">
			<image src="../../static/tu8.png" class="wh100"></image>
		</view>
		<view class="wid90 mar bacFFF borRad20 mar-top40" style="box-shadow: 0rpx 5rpx 20rpx 0rpx rgba(0,0,0,0.1);">
			<view class="wid90 mar dis disAl disJuB" style="height: 104rpx;">
				<view class="foSi35 fowe600">姓名</view>
				<input class="foSi25" style="text-align: right;" v-model="name" placeholder="输入您的姓名"/>
			</view>
			<view class="wid100 xia"></view>
			<view class="wid90 mar">
				<view class="foSi35 fowe600 mar-top30">代理类型</view>
				<view class="borRad10 hei80 dis disAl disJuB wid95 mar" style="color: #8A8A8A;">
					<view class="dis disAl" @click="agencyClick(0)">
						<view v-if="agency == 0" class="dis disAl disJuC borRad50" style="width: 26rpx;height: 26rpx;" 
							:style="'border: 1rpx solid '+theme.main_color+';'">
							<view class="borRad50" style="width: 14rpx;height: 14rpx;"
								:style="'background-color: '+theme.main_color+';'"></view>
						</view>
						<view v-if="agency != 0" class="dis disAl disJuC borRad50" style="width: 26rpx;height: 26rpx;border: 1rpx solid #818181;"></view>
						<view class="foSi30 mar-left10" :style="agency == 0?'color: '+theme.main_color+';':''">省代理</view>
					</view>
					<view class="dis disAl mar-left30" @click="agencyClick(1)">
						<view v-if="agency == 1" class="dis disAl disJuC borRad50" :style="'border: 1rpx solid '+theme.main_color+';'"
							style="width: 26rpx;height: 26rpx;">
							<view class="borRad50" style="width: 14rpx;height: 14rpx;" 
								:style="'background-color: '+theme.main_color+';'"></view>
						</view>
						<view v-if="agency != 1" class="dis disAl disJuC borRad50" style="width: 26rpx;height: 26rpx;border: 1rpx solid #818181;"></view>
						<view class="foSi30 mar-left10" :style="agency == 1?'color: '+theme.main_color+';':''">城市代理</view>
					</view>
					<view class="dis disAl mar-left30" @click="agencyClick(2)">
						<view v-if="agency == 2" class="dis disAl disJuC borRad50" :style="'border: 1rpx solid '+theme.main_color+';'"
							style="width: 26rpx;height: 26rpx;">
							<view class="borRad50" style="width: 14rpx;height: 14rpx;" 
								:style="'background-color: '+theme.main_color+';'"></view>
						</view>
						<view v-if="agency != 2" class="dis disAl disJuC borRad50" style="width: 26rpx;height: 26rpx;border: 1rpx solid #818181;"></view>
						<view class="foSi30 mar-left10" :style="agency == 2?'color: '+theme.main_color+';':''">区县代理</view>
					</view>
				</view>
			</view>
			<view class="wid100 xia mar-top10"></view>
			<view class="wid90 mar dis disAl disJuB" style="height: 104rpx;">
				<view class="foSi35 fowe600">手机号</view>
				<input class="foSi25 wid70" style="text-align: right;" type="number" v-model="phone" placeholder="输入您的手机号"/>
			</view>
			<view class="wid100 xia"></view>
			<view class="wid90 mar dis disAl disJuB" style="height: 123rpx;">
				<view class="foSi35 fowe600">意向工作城市</view>
				<picker :value="cityIndex" @change="bindCityChange" :range-key="'title'" :range="addressList">
					<view class="dis disAl foSi25">
						<view class="mar-right10" :style="city?'':'color: #7A7979;'">{{city?city.title:'请选择'}}</view>
						<uni-icons type="right" size="25rpx"></uni-icons>
					</view>
				</picker>
			</view>
		</view>
		<view class="wid90 mar bacFFF borRad40 dis disAl disJuC hei86 foSi35 fowe600 mar-top40 coFFF" 
			:style="'background-color: '+theme.main_color+';'" @click="tijiao()">提交申请</view>
		<view style="height: 57rpx;"></view>
		<!-- <unicloud-city-select ref="citySelect" :hot-city="hotCity" :location="false" @select="select"></unicloud-city-select> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: this.global.url,
				yanzheng: '获取验证码',
				sec: 0,
				name: '',
				agency: 0,
				phone: '',
				code: '',
				addressList: [],
				cityIndex: 0,
				// 当前选择的城市
				city: null,
				theme: null
				
			}
		},
		async onLoad(options) {
			await this.$style.getIndex(this.global.url,this.global.site_id)
			this.addressList = uni.getStorageSync('address');
			this.theme = uni.getStorageSync('theme')
		},
		methods: {
			bindCityChange: function(e) {
				this.cityIndex = e.detail.value
				this.city = this.addressList[this.cityIndex]
			},
			tijiao(){
				var that = this;
				if(!that.name){return uni.showToast({title: '请输入姓名',icon: 'error',duration: 2000})};
				//正则表达式定义手机号正确格式
				let reg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
				if (!reg.test(this.phone)){return uni.showToast({title: '请输入正确手机号',icon: 'error',duration: 2000})};
				if(!that.city){return uni.showToast({title: '请选择区域',icon: 'error',duration: 2000})};
				uni.request({
					url: that.global.url + 'api/qianyu_smfw/agent/agent_apply',
					method: "POST",
					header: {
						'site-id': that.global.site_id //自定义请求头信息
					},
					data: {
						phone: that.phone,
						name: that.name,
						level: that.agency+1,
						area: that.city.id
					},
					success(res) {
						let result = res.data
						if (result.code == 1) {
							uni.navigateBack(1)
						}else{
							uni.showToast({
								title: result.msg,
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'error',
								//显示持续时间为 2秒
								duration: 2000
							}) 
						}
					}
				})
				
			},
			// 点击城市选项
			select(city) {
				this.city = city;
			},
			// 打开城市选择页面
			open() {
				this.$refs.citySelect.open();
			},
			agencyClick(index){
				this.agency = index
			},
			bindDateChange: function(e) {
				this.date = e.detail.value
			},
		}
	}
</script>

<style>
	.content {
		min-height: 100vh;
		/* background-color: #9FC5F2; */
	}
	.xia{
		height: 1rpx;
		background-color: #E5E5E5;
	}
</style>
